<script>
  import { BoxBufferGeometry, MeshStandardMaterial } from "three"
  import {
    InteractiveObject,
    DirectionalLight,
    useFrame,
    T,
  } from "@threlte/core"
  import { spring } from "svelte/motion"
  import {
    Edges,
    useGltf,
    Text,
    GLTF,
    HTML,
    Environment,
    Grid,
    Float,
  } from "@threlte/extras"
  import { useTexture } from "@threlte/core"
  let rotation = 0
  useFrame(() => {
    rotation += 0.01
  })
  const tex = useTexture("/img/bird.jpg")
  const scale = spring(1)
  let color = "#333333"
</script>

<!-- Cube -->
<T.Group scale={$scale} position={[0, -1 / 2, 0]}>
  <T.Mesh
    position.y={2}
    rotation={[rotation, rotation, rotation]}
    castShadow
    let:ref
  >
    <!-- Add interaction -->
    <InteractiveObject
      object={ref}
      interactive
      on:pointerenter={() => (($scale = 2), (color = "green"))}
      on:pointerleave={() => (($scale = 1), (color = "red"))}
    />

    <T.BoxGeometry />

    <T.MeshStandardMaterial
      {color}
      roughness={0.5}
      metalness={0.5}
      opacity={0.5}
      transparent={true}
    />
    <!-- <Edges threshold={20} scale={2} color="green" /> -->
  </T.Mesh>
  <Float speed={2} floatIntensity={5} scale={0.8}>
    <T.Mesh position.y={2} position.x={-4} castShadow receiveShadow>
      <!-- Add interaction -->

      <!-- <T.BoxGeometry args={[3, 3, 3]} /> -->
      <T.SphereGeometry args={[0.5]} />

      <T.MeshStandardMaterial
        color={"0xffffff"}
        envMapIntensity={0.5}
        roughness={0.05}
        metalness={0.9}
      />

      <!-- <Edges threshold={20} scale={2} color="green" /> -->
    </T.Mesh>
  </Float>
</T.Group>
<!-- Floor -->
<T.Mesh receiveShadow rotation={[-Math.PI / 2, 0, 0.8]}>
  <!-- <T.CircleGeometry args={[3, 72]} /> -->
  <T.PlaneGeometry args={[25, 25]} />
  <T.MeshStandardMaterial map={tex} />
</T.Mesh>
